<template>
	<view class="container">
		<view class="line-1">
			<u-input border="bottom"   class="u-input">
				<template slot="prefix">
					绿地名称:
				</template>
			</u-input>
			<u-input border="bottom" clearable class="u-input" @click="upInsert()">
				<template slot="prefix">
					日期:
				</template>
			</u-input>
			<u-datetime-picker :show="show" v-model="fromDate" mode="date" @confirm="showDate"
				:closeOnClickOverlay="true" @close="show=false" @cancel="show=false">
			</u-datetime-picker>
		</view>
		<u-input border="bottom" clearable class="u-input">
			<template slot="prefix">
				网格名称:
			</template>
		</u-input>
		<u-input border="bottom" clearable class="u-input">
			<template slot="prefix">
				风险信息:
			</template>
		</u-input>
		<button v-text="btnTxt" class="btn" @click="upInsert"></button>
	</view>
</template>

<script>
	export default {
		name:"riskWaringCard",
		data() {
			return {
				btnTxt:"上传",
				show:false,
				fromDate: Number(new Date()),
			};
		},
		methods:{
			upInsert(){
				this.$emit("click")
			},
			// 日期以及网络编号生成
			showDate(aadate) {
				const timeFormat = uni.$u.timeFormat
				this.show = false
			},
			showDatea(){
				console.log("点击显示")
				this.show=true
			}
		}
	}
</script>

<style scoped>
	.container{
		width: 90%;
		margin: 0 2%;
		padding: 20rpx;
		background-color: #91CB74;
		border-radius: 20rpx;
		height: 330rpx;
	}
	.line-1{
		display: flex;
		flex-direction: row;
	}
	.u-input{
		margin:10rpx 0; 
		background-color: #fff;
		border-radius: 20rpx;
	}
	.line-1 .u-input:nth-last-child(0){
		margin-right: 20rpx;
	}.line-1 .u-input:nth-last-child(1){
		margin-left: 20rpx;
	}
	.btn{
		color: #000000;
		width: 100%;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin-top: 2%;
	}
</style>
